<template>
  <div>
    <div class="header">
      <van-nav-bar>
        <template #left>
          <van-icon name="bars" color="#000" size="30px" @click="toDetail()"/>
        </template>
        <template #title>
          <van-search placeholder="请输入搜索关键词" shape="round" @click="goToSearch"/>
        </template>
      </van-nav-bar>
    </div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        v-for="banner in banners"
        :key="banner.id"
      >
        <img :src="banner.image" alt="">
      </van-swipe-item>
    </van-swipe>

    <van-tabs>
      <van-tab 
        v-for="floor in floors"
        :key="floor.Id" 
        :title="floor.name"
      >
        <div class="card">
          <van-card
            v-for="data in floor.datas"
            :key="data.Id"
            :price="data.product.mallPcPrice"
            :origin-price="data.product.marketPrice"
            :title="data.product.name1"
            :thumb="data.product.masterImg"
            @click="goToDetail(data.product.id)"
          >
          </van-card>
        </div>
      </van-tab>
      <van-tab 
        v-for="floor in floors"
        :key="floor.Id" 
        :title="floor.name"
      >
        <div class="card">
          <van-card
            v-for="data in floor.datas"
            :key="data.Id"
            :price="data.product.mallPcPrice"
            :origin-price="data.product.marketPrice"
            :title="data.product.name1"
            :thumb="data.product.masterImg"
            @click="goToDetail(data.product.id)"
          >
          </van-card>
        </div>
      </van-tab>
    </van-tabs>

    


  </div>
</template>

<script>
import { findBanner,findFloor } from '@/api/home'
export default {
  name: 'home',
  data () {
    return {
      banners: [],
      grids: [{ icon: '&#xe699;', text: '分类查询', color: '#fe3835' },
        { icon: '&#xe69b;', text: '购物车', color: '#ff6a0c' },
        { icon: '&#xe837;', text: '乐码通道', color: '#7643ec' },
        { icon: '&#xe837;', text: '乐码通', color: '#7643ec' },
        { icon: '&#xe837;', text: '乐码', color: '#7643ec' },
        { icon: '&#xe7dc;', text: '乐码社区', color: '#75ca79' }],
      floors: []
    }
  },
  created () {
    findBanner()
      .then(data => {
        console.log('banners', data)
        this.banners = data
      })
      .catch(() => {})
    findFloor()
      .then(data => {
        console.log('floor', data)
        this.floors = data
      })
      .catch(() => {})
  },
  methods: {
    goToDetail(id){
          this.$router.push('/detail?id='+id)
          console.log(1)
        },
    goToSearch(){
          this.$router.push('/search')
        }
  }
}
</script>


<style lang="scss" scoped>

.header{
    height: 46px;
    .van-nav-bar{
      color: #000;
      background: linear-gradient(
90deg, #dd9b4c, #ffd787);
    }
    .close{
      font-size: 16px;
    }
    .van-search{
      padding: 0;
      background: none;
    }
  }

  .main{
    flex: 1;
    overflow: auto;
  }

  .van-tab{
    width: 100px!important;
  }
  .my-swipe .van-swipe-item {
    height: 150px;
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    img{
      width: 100%;
      height: 150px;
    }
  }
  .card{
    background: #f2f2f2;
    display: flex;
    flex-wrap: wrap;
  }
  .van-card{
    width: 180px;
    height: 180px;
    margin-top: 5px!important;
    margin-left:5px;
    border-radius: 5px;
    .van-card__price-integer,.van-card__price-currency{
      color: #ed5657;
    }
    .van-card__header{
      flex-direction: column;
    }
    img{
      width: 148px;
    }
    .van-card__content{
      margin-top: 20px;
      min-height: 50px !important;
    }
  }
  
</style>